<template>
	<view>
		<view class="title">重置密码</view>
		<view class="small-title">重置验证码将会发送到您的手机，请输入代码并创建新密码。</view>
		<view>
			<input type="text" v-model="tel" placeholder="手机号" class="item" placeholder-class="placeholder"/>
		</view>
		<view>
			<input type="text" v-model="number" placeholder="验证码" class="item" placeholder-class="placeholder"/>
			<text class="yanzheng">发送验证码</text>
		</view>
		<view>
			<input type="password" v-model="pwd" placeholder="确认密码" class="item" placeholder-class="placeholder"/>
		</view>
		<view class="footer">
			<button type="button">确认</button>
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return {
			tel:'',
			number:'',
			pwd:''
		}
	}
}
</script>
<style>
	.title {
		margin-left: 47rpx;
		margin-top: 67rpx;
		font-size: 60rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
	}
	.small-title {
		width: 629rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-left: 49rpx;
		margin-top: 49rpx;
		margin-bottom: 109rpx;
	}
	.item {
		width: 654rpx;
		height: 108rpx;
		line-height: 108rpx;
		background: #FFFFFF;
		border: 2rpx solid #F0F0F0;
		border-radius: 12rpx;
		border: 1px solid #F0F0F0;
		margin-bottom: 32rpx;
		margin-left: 48rpx;
		position: relative;
		/* border: 1px solid #007AFF; */
	}
	.yanzheng {
		position: absolute;
		left: 541rpx;
		top: 565rpx;
		width: 138rpx;
		height: 42rpx;
		background: #FEB140;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 42rpx;
		text-align: center;
	}
	.footer button {
		width: 654rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #FEB140;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		border-radius: 24rpx;
		margin: 48rpx;
	}
	.placeholder:focus {
		padding-left: 33rpx;
	}
</style>
